<!--
伸长的线
 -->
<template>
  <div class="container">
    <div id="cesiumContainer"> </div>
  </div>
</template>

<script>
  export default {
    name: "cesiumviewer",
    data() {
      return {
        viewer: {},
        redLine: {},
        geodesic: {},
        startCartographic: {},
        endCartographic: {},
        scratch: {}
      }
    },
    mounted() {
      var Cesium = this.Cesium;
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, // 是否显示动画控件
        homeButton: false, // 是否显示home键
        geocoder: false, // 是否显示地名查找控件
        baseLayerPicker: false, // 是否显示图层选择控件
        timeline: false, // 是否显示时间线控件
        fullscreenButton: true, // 是否全屏显示
        infoBox: true, // 是否显示点击要素之后显示的信息
        sceneModePicker: false, // 是否显示投影方式控件  三维/二维
        navigationInstructionsInitiallyVisible: false,
        navigationHelpButton: false, // 是否显示帮助信息控件
        orderIndependentTranslucency: false,
        shouldAnimate: true,
        scene3DOnly: false, // 每个几何实例将只能以3D渲染以节省GPU内存
        selectionIndicator: false // 取消点击有绿框
      });
      this.viewer._cesiumWidget._creditContainer.style.display = "none";//隐藏ceisum标识

      this.viewer.clock.shouldAnimate = true;

      this.scratch = new Cesium.Cartographic();
      this.geodesic = new Cesium.EllipsoidGeodesic();

      this.startup(Cesium)
      var isConstant = false;
      var label = this.viewer.entities.add({
        position: new Cesium.CallbackProperty(this.getMidpoint, isConstant),
        label: {
          // This callback updates the length to print each frame.
          text: new Cesium.CallbackProperty(this.getLength, isConstant),
          font: "20px sans-serif",
          pixelOffset: new Cesium.Cartesian2(0.0, 20),
        },
      });
      // Keep the view centered.
      this.viewer.trackedEntity = label;
      //Sandcastle_End
      Sandcastle.finishedLoading();

    },
    methods: {
      startup(Cesium) {
        'use strict';
        //Sandcastle_Begin
        // This example illustrates a Callback Property, a property whose
        // value is lazily evaluated by a callback function.
        // Use a CallbackProperty when your data can't be pre-computed
        // or needs to be derived from other properties at runtime.
        var viewer = this.viewer


        var startLatitude = 35;
        var startLongitude = -120;
        var endLongitude;
        var startTime = Cesium.JulianDate.now();

        // Add a polyline to the scene. Positions are dynamic.
        var isConstant = false;
        this.redLine = viewer.entities.add({
          polyline: {
            // This callback updates positions each frame.
            positions: new Cesium.CallbackProperty(function(time, result) {
              endLongitude =
                startLongitude +
                0.001 * Cesium.JulianDate.secondsDifference(time, startTime);
              return Cesium.Cartesian3.fromDegreesArray(
                [startLongitude, startLatitude, endLongitude, startLatitude],
                Cesium.Ellipsoid.WGS84,
                result
              );
            }, isConstant),
            width: 5,
            material: Cesium.Color.RED,
          },
        });
        this.startCartographic = Cesium.Cartographic.fromDegrees(
          startLongitude,
          startLatitude
        );
      },

      getLength(time, result) {
        var Cesium = this.Cesium;
        // Get the end position from the polyLine's callback.
        var endPoint = this.redLine.polyline.positions.getValue(time, result)[1];
        let endCartographic = Cesium.Cartographic.fromCartesian(endPoint);
        this.geodesic.setEndPoints(this.startCartographic, endCartographic);
        var lengthInMeters = Math.round(this.geodesic.surfaceDistance);
        return (lengthInMeters / 1000).toFixed(1) + " km";
      },

      getMidpoint(time, result) {

        var Cesium = this.Cesium;
        // Get the end position from the polyLine's callback.
        var endPoint = this.redLine.polyline.positions.getValue(time, result)[1];
        let endCartographic = Cesium.Cartographic.fromCartesian(endPoint);
        this.geodesic.setEndPoints(this.startCartographic, endCartographic);
        var midpointCartographic = this.geodesic.interpolateUsingFraction(
          0.5,
          this.scratch
        );
        //console.log('this.scratch', this.scratch)
        return Cesium.Cartesian3.fromRadians(
          midpointCartographic.longitude,
          midpointCartographic.latitude
        );
      },
    }
  }
</script>

<style scoped="scoped">
  .container {
    width: 100%;
    height: 100%;
  }

  #cesiumContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0;
    padding: 0;
    /*  overflow: hidden; */
  }
</style>
